<template>
  <px-scrollbar height="270px">
    <div class="alarm-list">
      <ul class="alarm-ul">
        <!-- <li>
          <p>
            <span>报警类别：</span><span>{{ alarmType }}</span>
          </p>
        </li> -->
        <li>
          <p>
            <span>报警级别：</span>
            <span>
              <px-tag style="color: #fff" round :color="tagBgColorList[alarmLevel]"> {{ alarmLevel }} </px-tag>
            </span>
          </p>
        </li>
        <li>
          <p>
            <span>报警点位：</span><span>{{ point }}</span>
          </p>
        </li>
        <li>
          <p>
            <span>报警位置：</span><span>{{ twinName }}</span>
          </p>
        </li>
        <li>
          <p>
            <span>报警内容：</span><span>{{ alarmContent }}</span>
          </p>
        </li>
        <li>
          <p>
            <span>报警时间：</span><span>{{ alarmTime }}</span>
          </p>
        </li>
      </ul>
      <div class="grid-button-list">
        <!-- <div class="grid-button-item" @click="handleShowDialog(1)">指标影响矩阵</div>
        <div class="grid-button-item" @click="handleShowDialog(1)">报警SOP处理方案</div>
        <div class="grid-button-item" @click="handleShowDialog(1)">报警摄像头联动</div> -->
        <div class="grid-button-item" @click="handleShowDialog(1)">定位到可视化</div>
      </div>
      <px-button link type="primary" class="detail-button" @click="handleToDetail">查看详情</px-button>
    </div>
  </px-scrollbar>
</template>
<script setup lang="ts">
import { isVisualEqp } from "@/api/visual/visualConfig";
import { PxMessage } from "px-ui";
import { useRouter } from "vue-router";
const router = useRouter();

const tagBgColorList = {
  一级报警: "#E02B2B",
  二级报警: "#FF771E",
  三级报警: "#F1B11A",
  四级报警: "#4A9BFF"
};

const props = defineProps({
  alarmLevel: {
    type: String,
    default: ""
  },
  alarmContent: {
    type: String,
    default: ""
  },
  point: {
    type: String,
    default: ""
  },
  twinName: {
    type: String,
    default: ""
  },
  alarmTime: {
    type: String,
    default: ""
  },
  alarmType: {
    type: String,
    default: ""
  },
  twinId: {
    type: String,
    default: ""
  },
  pointDetailDTO: {
    type: Object,
    default: () => ({})
  }
});

// const alarmList = [
//   {
//     id: 5,
//     alarmId: "912404241931250965",
//     alarmLevel: "低",
//     point: "ddddddd",
//     twinname: "3层柴油发电机室",
//     alarmType: "业务报警零零零零",
//     realityValue: null,
//     settingValue: null,
//     alarmTime: "2024-04-28 11:28:04",
//     alarmContent: "水温过高",
//     processStatus: "UNDO",
//     status: "VALID",
//     createTime: "2024-04-28 11:28:04",
//     updateTime: "2024-04-28 11:28:04",
//     alarmDisposeLogList: null
//   },
//   {
//     id: 3,
//     alarmId: "912404241931480516",
//     alarmLevel: "中",
//     point: "55",
//     twinname: "三楼",
//     alarmType: "设备保养",
//     realityValue: "2",
//     settingValue: "1",
//     alarmTime: null,
//     alarmContent: "设备保养",
//     processStatus: "UNDO",
//     status: "VALID",
//     createTime: "2024-04-24 19:31:49",
//     updateTime: "2024-04-24 19:31:49",
//     alarmDisposeLogList: null
//   },
//   {
//     id: 2,
//     alarmId: "912404241931250965",
//     alarmLevel: "高",
//     point: "22",
//     twinname: "三楼",
//     alarmType: "设备保养",
//     realityValue: "2",
//     settingValue: "1",
//     alarmTime: null,
//     alarmContent: "设备保养",
//     processStatus: "UNDO",
//     status: "VALID",
//     createTime: "2024-04-24 19:31:25",
//     updateTime: "2024-04-24 19:31:25",
//     alarmDisposeLogList: null
//   }
// ];

// 查看报警详情
const handleToDetail = () => {
  router.push(`/all/alert/business?alarmLevel=${props.alarmLevel}&point=${props.point}&alarmType=${props.alarmType}&alarmTime=${props.alarmTime}`);
};

const dealposition = pos => {
  try {
    let json = JSON.parse(pos);
    return json?.twinName;
  } catch (e) {
    return "";
  }
};
const handleShowDialog = async val => {
  let { twinId } = props;

  if (twinId) {
    const isEqp = await isVisualEqp({ eqpId: twinId });
    if (isEqp) {
      router.push({
        path: "/all/visual/template",
        query: {
          compEmitData: twinId
        }
      });
      return;
    }
  }
  PxMessage.info("因报警数据尚在梳理补全中，会存在报警点跟位置未绑定的情况，此类数据还不能跳转至可视化，待数据完善~");
};
</script>

<style lang="scss" scoped>
.alarm-list {
  line-height: 2;

  .alarm-ul {
    li {
      word-break: break-all;

      span:first-child {
        font-weight: 600;
        color: #333;
      }

      span:nth-child(2) {
        color: #666;
      }
    }
  }

  .grid-button-list {
    display: grid;
    grid-template-rows: 50% 50%;
    grid-template-columns: 50% 50%;
    gap: 10px;
    padding: 5px 10px 15px 0;

    .grid-button-item {
      width: 120px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      cursor: pointer;
      border: 1px solid #666;
      border-radius: 12px;
    }
  }

  .detail-button {
    position: absolute;
    right: 16px;
    bottom: 10px;
  }
}
</style>
